<template>
  <el-dialog title="计划变更" :visible.sync="detailsvisible" :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" size="mini" label-position="right">
      <el-row :gutter="20" class="list-data" v-for="(item, index) in ruleForm.planDtoList" :key="index">
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划名称" :prop="`planDtoList.${index}.planName`" :rules="rules.planName">
              <el-input class="input-item" v-model="item.planName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划日期" :prop="`planDtoList.${index}.times`" :rules="rules.times">
              <el-date-picker v-model="item.times" type="daterange" align="right" unlink-panels
                format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                :picker-options="pickerOptions" @change="selecttime($event, index)" :disabled="item.disabled">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="关联任务" :prop="`planDtoList.${index}.taskIds`" :rules="rules.taskIds">
              <el-select v-model="item.taskIds" multiple collapse-tags placeholder="请选择" @change="selecttaskIds">
                <el-option v-for="(item,index) in tasklist" :key="index"
                :label="item.taskName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="el-button-info">
              <el-button type="danger" @click="deleteli(index)">删除</el-button>
            </div>
          </el-col>
        </el-row>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="计划变更说明" prop="planChangeReason">
            <el-input type="textarea" class="input-item" v-model="ruleForm.planChangeReason" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="login-btn flex-center">
      <el-button class="Register" @click="handleClose()">取消</el-button>
      <el-button type="danger" @click="addFromdata()">新增</el-button>
      <el-button type="primary" @click="submitForm()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
export default {
  name: 'setPlan',
  data () {
    return {
      detailsvisible: false,
      tasklist: [],
      projectId: undefined,
      planDtoList: [],
      ruleForm: {
        changeId: undefined,
        planDtoList: [],
        planChangeReason: ''
      },
      rules: {
        planName: [{ required: true, message: '请输入', trigger: 'blur' }],
        times: [{ required: true, message: '请选择', trigger: 'change' }],
        taskIds: [{ required: true, message: '请选择', trigger: 'change' }],
        planChangeReason: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  mounted () {
  },
  methods: {
    info (projectId, changeId) {
      this.projectId = projectId
      this.ruleForm.changeId = changeId
      this.detailsvisible = true
      this.loadDetailWidgetData()
      this.loadtasklistWidgetData()
    },
    /**
     * 项目计划
     */
    loadDetailWidgetData () {
      let params = {
        projectId: this.$route.query.projectId ? this.$route.query.projectId : this.projectId
      };
      return new Promise((resolve, reject) => {
        Administration.planlist(this, params).then(res => {
          this.ruleForm.planDtoList = res.data
          this.planDtoList = []
          res.data.forEach((item, index) => {
            this.planDtoList.push(item)
            this.ruleForm.planDtoList[index].times = [item.beginDate, item.endDate]
            this.ruleForm.planDtoList[index].taskIds = []
            this.ruleForm.planDtoList[index].disabled = true
            item.planTaskVos.forEach(items => {
              this.ruleForm.planDtoList[index].taskIds.push(items.taskId)
            })
          })
        }).catch(e => {
          reject(e);
        });
      });
    },
    selecttaskIds (data) {
      this.$forceUpdate()
    },
    /**
     * 项目任务
     */
    loadtasklistWidgetData () {
      let params = {
        projectId: this.$route.query.projectId ? this.$route.query.projectId : this.projectId
      };
      return new Promise((resolve, reject) => {
        Administration.tasklist(this, params).then(res => {
          this.tasklist = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 计划日期
    selecttime (times, index) {
      if (times) {
        this.ruleForm.planDtoList[index].beginDate = times[0]
        this.ruleForm.planDtoList[index].endDate = times[1]
      } else {
        this.ruleForm.planDtoList[index].beginDate = ''
        this.ruleForm.planDtoList[index].endDate = ''
      }
    },
    // 新增
    addFromdata () {
      let Obj = {
        planName: '',
        beginDate: '',
        endDate: '',
        times: [],
        disabled: false
      }
      this.ruleForm.planDtoList.push(Obj)
    },
    // 删除
    deleteli (index) {
      this.ruleForm.planDtoList.splice(index, 1)
    },
    // 保存
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.ruleForm.projectId = this.$route.query.projectId ? this.$route.query.projectId : this.projectId
          this.ruleForm.planDtoList.forEach((item, index) => {
            this.$delete(this.ruleForm.planDtoList[index], 'times')
          })
          this.$emit('getPlans', this.ruleForm)
          this.handleClose()
        } else {
          this.ruleForm.planDtoList.forEach((item, index) => {
            this.ruleForm.planDtoList[index].times = [item.beginDate, item.endDate]
          })
        }
      })
    },
    // 关闭弹框
    handleClose () {
      this.ruleForm = {
        planDtoList: [],
        planChangeReason: ''
      }
      this.detailsvisible = false
    }
  }
}
</script>
<style scoped>
.list-data{border: 1px solid #E4E7ED;border-radius: 4px;padding: 5px;margin: 10px 0;}
.login-btn{margin-top: 20px;}
.el-button-info{text-align: center;}
.el-range-editor.el-input__inner{width: 250px;}
</style>
